<template>
  <div class="strut-div">
    <div class="card-item" style="height:285px;">
      <p class="card-title">"三品一标"认证结构</p>
      <div class="card-div percent-wrap">
        <div class="percent-box">
          <common-cyclic-chart ref="organicCountChart" :config="organicCountConfig"></common-cyclic-chart>
          <p class="percent-txt" style="color:#0dd373">有机</p>
        </div>
        <div class="percent-box">
          <common-cyclic-chart ref="greenCountChart" :config="greenCountConfig"></common-cyclic-chart>
          <p class="percent-txt" style="color:#12f5fe">绿色</p>
        </div>
        <div class="percent-box">
          <common-cyclic-chart ref="wghCountChart" :config="wghCountConfig"></common-cyclic-chart>
          <p class="percent-txt" style="color:#0a99fe">无公害</p>
        </div>
        <div class="percent-box">
          <common-cyclic-chart ref="landmarkCountChart" :config="landmarkCountConfig"></common-cyclic-chart>
          <p class="percent-txt" style="color:#f7a224">地理标志</p>
        </div>
      </div>
    </div>

    <div class="card-item" style="height:330px;margin-top:20px;">
      <p class="card-title">"三品一标"产品总体占比</p>
      <div class="card-div">
        <div class="strut-div">
          <div id="famousPercentChart" class="strut-div"></div>
        </div>
      </div>
    </div>

    

    <div class="card-item" style="margin-top:20px;height:336px;display: inline-block;width: 49%;margin-right: 2%;">
      <p class="card-title">产品订单 TOP5</p>
      <div class="card-div">
        <div class="change-box">
            <p :class="{'active-btn':orderIndex == 1}" @click="handlerOrderBtn(1)">订单数量（万单）</p>
            <p :class="{'active-btn':orderIndex == 2}" @click="handlerOrderBtn(2)">订单金额（亿元）</p>
        </div>
        <top-bar-chart v-if="orderIndex == 1" ref="orderCountBar" :config="orderCountBarConfig"></top-bar-chart>
        <top-bar-chart v-else-if="orderIndex == 2" ref="orderAmountBar" :config="orderAmountBarConfig"></top-bar-chart>
      </div>
    </div>
    <div class="card-item" style="margin-top:20px;height:336px;display: inline-block;width: 49%;">
      <p class="card-title">销售额（亿元）TOP5</p>
      <div class="card-div">
          <div class="change-box">
            <p :class="{'active-btn':salesIndex == 1}" @click="handlerSalesBtn(1)">年累计top5</p>
            <p :class="{'active-btn':salesIndex == 2}" @click="handlerSalesBtn(2)">上月累计top5</p>
        </div>
        <top-bar-chart v-if="salesIndex == 1" ref="salesYearBar" :config="salesYearBarConfig"></top-bar-chart>
        <top-bar-chart v-else-if="salesIndex == 2" ref="salesMonthBar" :config="salesMonthBarConfig"></top-bar-chart>
      </div>
    </div>
  </div>
</template>
<script>
  import echarts from 'echarts';

  import CommonCyclicChart from '@/components/common/common-cyclic-chart.vue';
  import CommonBarChart from '@/components/common/common-bar-chart.vue';
  import topBarChart from '@/views/sx-digital-agriculture/sx-left/top-bar-chart.vue'

  export default {
    name: 'sxFamousLeft',
    components: {
      CommonCyclicChart,
      CommonBarChart,
      topBarChart
    },
    data() {
      return {
        orderIndex:1,
        salesIndex:1,
        organicCountConfig: {
          option: {
            id: 'organic-count-cyclic-chart',
            txtColor: '#12f5fe',
            startColor: '#12f5fe',
            endColor: '#12f5fe',
            value: 9.29
          }
        },
        greenCountConfig: {
          option: {
            id: 'green-count-cyclic-chart',
            txtColor: '#12f5fe',
            startColor: '#0dd373',
            endColor: '#0dd373',
            value: 24.43
          }
        },
        wghCountConfig: {
          option: {
            id: 'wgh-count-cyclic-chart',
            txtColor: '#12f5fe',
            startColor: '#0a99fe',
            endColor: '#0a99fe',
            value: 56.07
          }
        },
        landmarkCountConfig: {
          option: {
            id: 'landmark-count-cyclic-chart',
            txtColor: '#12f5fe',
            startColor: '#0a99fe',
            endColor: '#0a99fe',
            value: 10.21
          }
        },
        orderCountBarConfig: {
          id: 'orderCountBar',
          option: {
            // title: {
            //   text: '蔬菜TOP5（单位：千克）',
            //   textStyle: {
            //     color: '#FFFFFF',
            //     fontSize: 16
            //   }
            // },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            grid: {
              left: '0%',
              right: '10%',
              top: '15%',
              bottom: '0%',
              containLabel: true
            },
            xAxis: {
              type: 'value',
              min: 0,
              max: null,
              axisLabel: {
                color: "#E1E7FB"
              }
            },
            yAxis: {
              type: 'category',
              axisLabel: {
                color: '#E1E7FB',
                fontSize: 16
              },
              data: ['苹果', '其他', '水果', '梨', '枣'].reverse()
            },
            series: [{
              name: '',
              type: 'bar',
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [{
                  offset: 0,
                  color: '#4465F3' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#00FAFF' // 100% 处的颜色
                }],
              },
              barWidth: 15,
              itemStyle: {
                barBorderRadius: 10
              },
              label:{
                  show:true,
                  position:'right',
                  formatter:'{c}',
                  color:"#62FFEB",
                  fontSize:14
              },
              data: [3664.86, 1670.65, 1237.36, 517.1, 479.84].reverse()
            }]
          }
        },
        orderAmountBarConfig: {
          id: 'orderAmountBar',
          option: {
            // title: {
            //   text: '蔬菜TOP5（单位：千克）',
            //   textStyle: {
            //     color: '#FFFFFF',
            //     fontSize: 16
            //   }
            // },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            grid: {
              left: '0%',
              right: '10%',
              top: '15%',
              bottom: '0%',
              containLabel: true
            },
            xAxis: {
              type: 'value',
              min: 0,
              max: null,
              axisLabel: {
                color: "#E1E7FB"
              }
            },
            yAxis: {
              type: 'category',
              axisLabel: {
                color: '#E1E7FB',
                fontSize: 16
              },
              data: ['苹果', '其他', '水果', '生羊肉', '生羊腿'].reverse()
            },
            series: [{
              name: '',
              type: 'bar',
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [{
                  offset: 0,
                  color: '#4465F3' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#00FAFF' // 100% 处的颜色
                }],
              },
              barWidth: 15,
              itemStyle: {
                barBorderRadius: 10
              },
              label:{
                  show:true,
                  position:'right',
                  formatter:'{c}',
                  color:"#62FFEB",
                  fontSize:14
              },
              data: [10.26, 4.05, 1.98, 1.87, 1.49].reverse()
            }]
          }
        },
        salesYearBarConfig: {
          id: 'salesYearBar',
          option: {
            // title: {
            //   text: '蔬菜TOP5（单位：千克）',
            //   textStyle: {
            //     color: '#FFFFFF',
            //     fontSize: 16
            //   }
            // },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            grid: {
              left: '0%',
              right: '10%',
              top: '15%',
              bottom: '0%',
              containLabel: true
            },
            xAxis: {
              type: 'value',
              min: 0,
              max: null,
              axisLabel: {
                color: "#E1E7FB"
              }
            },
            yAxis: {
              type: 'category',
              axisLabel: {
                color: '#E1E7FB',
                fontSize: 16
              },
              data: ['苹果', '其他', '生羊肉', '生羊腿', '卤肉类'].reverse()
            },
            series: [{
              name: '',
              type: 'bar',
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [{
                  offset: 0,
                  color: '#44F348' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#E4FF00' // 100% 处的颜色
                }],
              },
              barWidth: 15,
              itemStyle: {
                barBorderRadius: 10
              },
              label:{
                  show:true,
                  position:'right',
                  formatter:'{c}',
                  color:"#62FFEB",
                  fontSize:14
              },
              data: [8.91, 2.9, 1.7, 1.35, 1.11].reverse()
            }]
          }
        },
        salesMonthBarConfig: {
          id: 'salesMonthBar',
          option: {
            // title: {
            //   text: '蔬菜TOP5（单位：千克）',
            //   textStyle: {
            //     color: '#FFFFFF',
            //     fontSize: 16
            //   }
            // },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            grid: {
              left: '0%',
              right: '10%',
              top: '15%',
              bottom: '0%',
              containLabel: true
            },
            xAxis: {
              type: 'value',
              min: 0,
              max: null,
              axisLabel: {
                color: "#E1E7FB"
              }
            },
            yAxis: {
              type: 'category',
              axisLabel: {
                color: '#E1E7FB',
                fontSize: 16
              },
              data: ['苹果', '其他', '生羊肉', '生羊腿', '卤肉类'].reverse()
            },
            series: [{
              name: '',
              type: 'bar',
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [{
                  offset: 0,
                  color: '#44F348' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#E4FF00' // 100% 处的颜色
                }],
              },
              barWidth: 15,
              itemStyle: {
                barBorderRadius: 10
              },
              label:{
                  show:true,
                  position:'right',
                  formatter:'{c}',
                  color:"#62FFEB",
                  fontSize:14
              },
              data: [0.98, 0.21, 0.14, 0.14, 0.1].reverse()
            }]
          }
        }
      }
    },
    mounted() {
      this.$refs.organicCountChart.initChart();
      this.$refs.greenCountChart.initChart();
      this.$refs.wghCountChart.initChart();
      this.$refs.landmarkCountChart.initChart();

      this.initFamousPercentChart();
      

      this.inintTopRankData()
    },
    methods: {
      initFamousPercentChart() {
        let _charts = echarts.init(document.getElementById('famousPercentChart'));
        let option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          //   color:['#B6A3FF','#4465F3'],
          legend: {
            top: '10',
            right: '20',
            textStyle: {
              color: '#fff'
            },
            data: ['山西省', '全国']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'value',
            axisLabel: {
              color: '#fff'
            }
          },
          yAxis: {
            type: 'category',
            axisLabel: {
              color: '#fff'
            },
            data: ['有机产品', '绿色产品', '无公害产品', '地理标志']
          },
          series: [{
              name: '山西省',
              type: 'bar',
              stack: '总量',
              label: {
                color: '#fff',
                show: true,
                position: 'right'
              },
              barWidth: 20,
              data: [130, 342, 785, 143],
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [{
                  offset: 0,
                  color: '#B6A3FF' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#6E53F7' // 100% 处的颜色
                }],
              },
              zlevel: 1
            },
            {
              name: '全国',
              type: 'bar',
              stack: '总量',
              label: {
                color: '#fff',
                show: true,
                position: 'right'
              },
              barWidth: 20,
              data: [4693, 23998, 63591, 2523],
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [{
                  offset: 0,
                  color: '#4465F3' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#00FAFF' // 100% 处的颜色
                }],
              },
            }
          ]
        };

        _charts.setOption(option);
      },
      
      inintTopRankData() {
          this.$refs.orderCountBar.initChart();
          this.$refs.salesYearBar.initChart();
      },
      handlerOrderBtn(index) {
          this.orderIndex = index;
          this.$nextTick(function() {
            if (index == 1) {
                this.$refs.orderCountBar.initChart();
            } else {
                this.$refs.orderAmountBar.initChart();
            }
          });
      },
      handlerSalesBtn(index) {
          this.salesIndex = index;
          this.$nextTick(function() {
            if (index == 1) {
               this.$refs.salesYearBar.initChart();
            } else {
                this.$refs.salesMonthBar.initChart();
            }
          });
      }
    }
  }

</script>
<style lang="scss" scoped>
  .percent-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .percent-box {
      flex: 1;
      height: 100%;
      position: relative;

      .percent-txt {
        position: absolute;
        left: 50%;
        bottom: 15px;
        transform: translateX(-50%);
      }
    }
  }

  .change-box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: absolute;
      left: 50%;
      top: 50px;
      transform: translateX(-50%);
      border: 1px solid #00BFFF;
      border-radius: 5px;
      width: 240px;
      height: 22px;
      line-height: 20px;
      overflow: hidden;
      z-index: 99;

      >p {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 100%;
          flex: 1;
          font-size: 14px;
          color: #E1E7FB;
          cursor: pointer;
      }

      >p.active-btn {
          background: #00BFFF;
      }
  }
</style>
